<template>
	<view class="uni_box home">
		<!-- <navbar title='安全中心' :yin="false">
		</navbar> -->
		<image class="img_bj" src="/static/img/img_bj.png"/>
		<view class="loginview">
			<view class="lone">
				<image class="lfan" src="/static/img/icon_backs.png" @click="getfan"/>
				<!-- <text class="Loginname">欢迎登录平台</text> -->
			</view>
			<view class="content">
				<view class="logoview">
					<text class="loginname">登录{{ configinfo.app_name?configinfo.app_name:'项多汇' }}</text>
					<text class="loginmiao">人脉、流量、项自这里都有</text>
				</view>
				<view class="isnoapp" v-if="!isapp">
					<view class="uone">
						<view class="ushuru">
							<u-input v-model="account" type="text" :border="false" placeholder="请输入手机号/账户名称"/>
						</view>
					</view>
					<view class="uone" style="margin-bottom: 30rpx;" v-if="!isyan">
						<view class="ushuru">
							<u-input v-model="password" type="password" :border="false" placeholder="请输入密码"/>
						</view>
					</view>
					<view class="uone" style="margin-bottom: 30rpx;" v-if="isyan">
						<view class="ushuru">
							<u-input v-model="code" type="text" :border="false" placeholder="请输入验证码"/>
							<view class="huoqu"  v-if="isTimer">{{time}}s</view>
							<view class="huoqu" v-else @click="lockSheet">获取验证码</view>
						</view>

					</view>
					<view class="yanlogin">
						<!-- <text class="Forgot-password" @click="wangji">忘记密码？</text> -->
						<text class="Forgot-password yan" @click="yanClick">{{ !isyan?'验证码登录':'密码登录' }}</text>
						<text class="Forgot-password" style="margin-left: auto;" @click="zhuce">注册</text>
					</view>
					<view class="sbotview">
						<view class="tologin " v-if="!isyan"  :class="account&&password?'btn':''" @click="getlogin">登录</view>
						<view class="tologin " v-if="isyan"  :class="account&&code?'btn':''" @click="getlogin">登录</view>
						<!-- <text class="No-account" @click="zhuce">没有帐号<text class="zhutit">注册</text></text> -->
					</view>
				</view>

				<!-- app登录 -->
				<view class="isnoapp" v-if="isapp">
					<view class="appview"  @click="getloginwechat">
						<image class="wechat" src="/static/mine/wechat.png"/>
						<text>微信授权登录</text>
					</view>
					<view class="sbotview">
						<view class="tologin "  :class="isgou?'btn':''" @click="getloginwechat">一键登录</view>
						<!-- <view class="tologin " v-if="isyan"  :class="account&&code?'btn':''" @click="getlogin">登录</view> -->
						<!-- <text class="No-account" @click="zhuce">没有帐号<text class="zhutit">注册</text></text> -->
					</view>
				</view>
				

				<view class="yandeng">
					<!-- <text class="fangshi">其他登录方式 </text> -->
					<!-- <image class="icon_wx" @click="getwechat" src="/static/img/icon_wx.png"/> -->
					<view class="yinview" @click.stop="isgou=!isgou">
						<image class="yueicon" src="/static/img/gous.png" v-if="isgou"/>
						<image class="yueicon" src="/static/img/gou.png" v-if="!isgou"/>
						<text class="yuedu">已阅读并同意 <text class="xies" @click.stop="xieyi(1)">《用户协议》</text>  及 <text class="xies"  @click.stop="xieyi(2)">《隐私政策》</text></text>
					</view>
				</view>
				

				
			</view>
		</view>
		

		<u-select v-model="bshow" :list="blist" @confirm="bconfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				wang:'',
				bshow:false,
				blist:[
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				// phone:'13555555555',
				// password:'111111',
				phone:'',
				// password:'',
				isyan:false,
				code:'',
				isgou:false,

				timer: null,
				time: 60,
				isTimer: false,
				
				// account:'15839170759',
				// password:'a123456',
				account:'',
				password:'',
				configinfo:uni.getStorageSync('configinfo'),
				isapp:true
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.isapp = true
			// #endif
			// #ifdef H5
			this.isapp = false
			// #endif
		},
		onShow() {
		},
		methods: {
			async getlogin(){
				
				if(!this.isyan){
					if(!this.account){
						this.$u.toast('请输入账号');
						return false
					}
					if(!this.password){
						this.$u.toast('请输入密码');
						return false
					}
					if(!this.isgou){
						this.$u.toast('请先勾选协议');
						return false
					}
					let res = await this.$u.api.login({
						account:this.account,
						password:this.password
					});
					console.log(res)
					this.$store.commit('changeToken', res.userinfo.token);
					// this.$store.commit('changeJiaose', data.jiaose);
					this.$u.toast('登录成功');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/tabbar/Tabhome'
						})
					}, 1000);
				}else{
					if(!this.account){
						this.$u.toast('请输入手机号');
						return false
					}
					if(!this.code){
						this.$u.toast('请输入验证码');
						return false
					}
					if(!this.isgou){
						this.$u.toast('请先勾选协议');
						return false
					}
					let res = await this.$u.api.mobilelogin({
						mobile:this.account,
						captcha:this.code
					});
					console.log(res)
					this.$store.commit('changeToken', res.userinfo.token);
					// this.$store.commit('changeJiaose', data.jiaose);
					this.$u.toast('登录成功');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/tabbar/Tabhome'
						})
					}, 1000);
				}
				
			},
			xuanwang(){
				this.bshow = true
			},
			bconfirm(e){
				console.log(e)
				this.wang = e[0].value
			},
			wangji(){
				this.navrouter("/pages/login/ForgetPsd");
			},
			zhuce(){
				this.navrouter("/pages/login/register");
			},
			getfan(){
				uni.navigateBack()
			},
			getwechat(){
				this.navrouter("/pages/login/loginWeChat");
			},
			yanClick(){
				this.isyan = !this.isyan
			},
			xieyi(e){
				if(e == 1){
					//用户协议
					this.navrouter("/pages/TPage/Xieyi?type=yonghuxieyi");
				}else if(e == 2){
					//隐私协议
					this.navrouter("/pages/TPage/Xieyi?type=yinsixieyi");
				}
			},
			async lockSheet() {
				if(!this.account){
					this.$u.toast("请输入手机号");
					return false;
				}
				
				let res = await this.$u.api.smsSend({
					mobile: this.account,
					event:'mobilelogin'
				});
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				this.$u.toast("发送成功");
				// this.yanshow = true
				// this.initYpRiddler()
				// this.$refs.captcha.initYpRiddler();
				// this.$refs.captcha.verify();
			},
			async getloginwechat(){
				if(!this.isgou){
					this.$u.toast("请先勾选协议");
					return;
				}

				// const that = this;
                // uni.showLoading();
                // uni.getProvider({
                //     service: 'oauth',
                //     success: function (res) {
                //         //支持微信、qq和微博等
                //         if (res.provider.indexOf('weixin') > -1) {
                //             uni.login({
                //                 provider: 'weixin',
                //                 success: function (loginRes) {
				// 					console.log(loginRes) 
                //                     // that.wxLogin(loginRes); //请求登录接口方法
                //                 },
                //                 fail: function (res) {
                //                     uni.hideLoading();
				// 					console.log(res)
                //                     // this.showToast('微信登录失败');
                //                 }
                //             })
                //         }
                //     }
                // });
				// return;
				uni.showLoading({
				    title: '登录中'
				});
				let that = this
				// #ifndef H5
				uni.login({
					provider:'weixin',
					onlyAuthorize:true,
					// #ifdef MP-ALIPAY
					scopes: 'auth_user', //支付宝小程序需设置授权类型
					// #endif
					success: (loginRes) => {
						console.log(loginRes)
						uni.hideLoading();
						that.getthird(loginRes)
						// this.$api.post({
						// 	url: '/wanlshop/user/third',
						// 	data: {
						// 		platform: provider.platform,
						// 		loginData: loginRes,
						// 		client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync("wanlshop:chat_client_id") : null,
						// 		RegistrationID:this.RegistrationID
						// 	},
						// 	success: res => {
								
						// 		uni.hideLoading();
						// 		if (res.binding == 0) {
						// 			this.$wanlshop.to(`/pages/user/auth/perfect?third_id=${res.third_id}&platform=${provider.platform}&url=${this.pageroute}`);
						// 		}else{
						// 			if(!res.mobile){
						// 				this.$wanlshop.to(`/pages/user/auth/bindPhone?url=${this.pageroute}&token=${res.userinfo.token}`)
						// 			}else{
						// 				this.$store.dispatch('user/login', res);
						// 				this.$store.dispatch('cart/login');
						// 				this.$store.dispatch('chat/get');
						// 				this.getHome();//跳转首页
						// 				// uni.reLaunch({url: '/uni_modules/qctask/pages/home/index'});
						// 			}
						// 		}
						// 	}
						// });
						// 隐藏键盘
						uni.hideKeyboard();
					},
					fail: err => {
						uni.hideLoading();
						console.log(err);
					}
				});
				// #endif
			},
			async getthird(loginRes){
				console.log(loginRes)
				let res = await this.$u.api.thirdLogin({
					code:loginRes.code
				});
				console.log(res)
				// this.navrouter("/pages/login/register?third_id=3");
				// return;
				if(res.binding == 0){
					//等于0 去绑定手机号
					this.navrouter("/pages/login/register?third_id="+res.third_id);
				}else if(res.binding == 1){
					// this.navrouter("/pages/login/register?third_id="+res.third_id);
					// return;
					//跳转登录
					this.$store.commit('changeToken', res.userinfo.token);
					// this.$store.commit('changeJiaose', data.jiaose);
					this.$u.toast('登录成功');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/tabbar/Tabhome'
						})
					}, 1000);
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.uni_box{
		position: relative;
		min-height: 100vh;
	}
	.img_bj{
		position: absolute;
		width: 100%;
		height: 114%;
	}
	.loginview{
		position: relative;
	}
	.lone{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 40rpx;
		// #ifdef APP-PLUS
		padding-top: calc(var(--status-bar-height) + 40rpx);;
		// #endif
		.lfan{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;

		}
		.Loginname{
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}
	}
	.logoview{
		position: relative;
		display: flex;
		flex-direction: column;
		margin-bottom: 60rpx;
		.loginname{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 60rpx;
			color: #333333;
		}
		.loginmiao{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
			margin-top: 15rpx;
			display: block;
		}
		.loview{
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			display: block;
			
		}
		.lmiaoshu{
			display: flex;
			flex-direction: column;
			margin: 50rpx 0 30rpx;
			.mview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 15rpx;
				.icon_zj{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				.dai{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #2594FB;
				}
			}
		}
	}
	.chongji{
		width: 38rpx;
		height: 36rpx;
	}
	.content{
		// background-color: #fff;
		padding: 30rpx 60rpx;
		.mpone{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 80rpx;
			.touview{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.tou2{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: absolute;
			}
			.xj{
				position: relative;
				z-index: 1;
				width: 42rpx;
				height: 38rpx;
			}
			.mpright{
				flex: 1;
				display: flex;
				flex-direction: column;
				.yxname{
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}
				.to lo g i nview{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10rpx;
					.idnum{
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						display: inline-block;
						margin-right: 13rpx;
					}
					.dengji{
						padding: 5rpx 30rpx;
						background: #FF8004;
						border-radius: 14rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.qian{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 45rpx;
			.qbiao{
				display: inline-block;
				width: 8rpx;
				height: 36rpx;
				background: #FF8004;
				margin-right: 8rpx;

			}
			.qname{
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.uone{
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			.Input-head{
				display: flex;
				flex-direction: row;
				align-items: center;

			}
			.usdt{
				width: 46rpx;
				height: 46rpx;
				margin-right: 12rpx;
			}
			.Input-label{
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				display: inline-block;
				margin-left: 20rpx;
			}
		}
		// .uone:last-child{
		// 	margin-bottom: 30rpx;
		// }
		.Forgot-password{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
		.yan{
			color: #2594FB;
		}
		.ushuru{
			padding: 20rpx 30rpx;
			// background: #F7F7F7;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1px solid #FFFFFF;
			// margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			min-height: 80rpx;
			// border: 1rpx solid #FFFFFF;
			/deep/.u-input__input{
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
			.xuantit{
				color: #c0c4cc;
			}
			.xactive{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
			.xia{
				margin-left: auto;
				width: 16rpx;
				height: 10rpx;
			}
			.quanbu{
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #010101;
			}
			.huoqu{
				padding: 8rpx 0rpx;
				margin-left: 10rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #2594FB;
			}
		}
		.keyong{
			display: block;
			text-align: right;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 22rpx;
			color: #010101;
			margin-bottom: 75rpx;
		}
		
		.sbotview{
			margin: 60rpx 0 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.shoufei{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #010101;
				display: block;
				margin-bottom: 15rpx;


			}
			.tologin{
				width: 100%;
				height: 96rpx;
				background: #CCCCCC;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
			}
			.btn{
				background: #2594FB;
				color: #fff;
			}
			.No-account{
				display: block;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 26rpx;
				color: #A5A5A5;
				margin-top: 40rpx;
			}
			.zhutit{
				color: #000;
			}
		}
		.yanlogin{
			display: flex;
			flex-direction: row;
			align-items: center;

		}
		.yandeng{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 260rpx 10rpx 30rpx;
			.fangshi{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
			}
			.icon_wx{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin: 30rpx auto 40rpx;
			}
			.yinview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 0 auto;
				.yueicon{
					margin-right: 14rpx;
					width: 44rpx;
					height: 40rpx;
					position: relative;
					// top: -5rpx;
				}
				.yuedu{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					width: 100%;
					white-space: nowrap;
					text-align: center;

				}
				.xies{
					color: #2594FB;
				}
			}

		}
		// padding-bottom: 150rpx;
	}
	.appview{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 40% 0 20%;
		.wechat{
			width: 100rpx;
			height: 100rpx;
		}
		text{
			color: #666;
			font-size: 30rpx;
			font-weight: 500;
			margin-top: 30rpx;
			display: block;
		}
	}
</style>
